<template>
	<view class="commend_box">
		<!-- 评论区 -->
		<scroll-view class="commend-scroll-view" scroll-y @scrolltolower="scrolltolower">
			<!-- 默认插槽 -->
			<slot></slot>
			<view class="commend_title">评论区({{ totalCount }})</view>
			<view class="commend_item" v-for="(item, index) of commendList" :key="index">
				<view class="commend_item_avatar">
					<image :src="item.user.avatarUrl"></image>
				</view>
				<view class="commend_item_info">
					<view class="user_name">{{ item.user.nickname }}</view>
					<view class="release_time">{{ item.timeStr }}</view>
					<view class="txt">{{ item.content }}</view>
					<view class="recontext" @click="handleShowRecommend(item.commentId)">{{ item.replyCount }}条回复</view>
				</view>
			</view>
			<view class="tip" v-if="!hasMore">没有更多评论了~~</view>
		</scroll-view>
		<!-- 遮罩 -->
		<view class="comment_mask" @click="handleCloseRecommend" v-show="isShow"></view>
		<!-- 回复层 -->
		<view class="recomment" :class="{ show_recomment: isShow }">
			<view class="recomment_title">回复({{ reTotalCount }})</view>
			<scroll-view scroll-y class="recomment-scroll-view" @scrolltolower="scrollItemTolower(ownerComment.commentId)">
				<view class="commend_item" v-if="JSON.stringify(ownerComment) != '{}'">
					<view class="commend_item_avatar">
						<image :src="ownerComment.user.avatarUrl"></image>
					</view>
					<view class="commend_item_info" style="border-bottom: 0;">
						<view class="user_name">{{ ownerComment.user.nickname }}</view>
						<view class="release_time">{{ ownerComment.timeStr }}</view>
						<view class="txt">{{ ownerComment.content }}</view>
					</view>
				</view>
				<view class="line_20"></view>
				<view class="recomment_item" v-for="(item, index) of recommentList" :key="index">
					<view class="recomment_item_avatar">
						<image :src="item.user.avatarUrl"></image>
					</view>
					<view class="recomment_item_info">
						<view class="user_name">{{ item.user.nickname }}</view>
						<view class="release_time">{{ item.timeStr }}</view>
						<view class="txt">{{ item.content }}</view>
					</view>
				</view>
				<view class="tip" v-if="!reHasMore">没有更多评论了~~</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getCommentNew, getCommentFloor } from '../../api/index.js'
 	export default {
		name:"Commend",
		props: ['videoId', 'videoType'],
		data() {
			return {
				// 用户评论列表
				commendList: [],
				// 评论总数
				totalCount: 0,
				// 是否还有下一页
				hasMore: true,
				// 获取评论的options
				commentOptions: {
					id: this.videoId, 
					type: 1, 
					pageNo: 1,
					// 按照热度排序
					sortType: 2
				},
				// 获取评论回复的options
				commentFloorOptions: {
					parentCommentId: 0,
					id: this.videoId, 
					type: 1,
					time: '',
					limit: 10
				},
				// 是否显示回复列表
				isShow: false,
				// 评论回复列表
				recommentList: [],
				// 评论回复总数
				reTotalCount: 0,
				// 当前评论回复列表所在的评论
				ownerComment: {},
				// 评论回复是否还有下一页数据
				reHasMore: false
			};
		},
		created() {
			this.getCommentNewDetail()
		},
		methods: {
			async getCommentNewDetail() {
				// 数据处理
				if (this.videoType == 1) {
					this.commentOptions.type = 5
				} else {
					this.commentOptions.type = 1
				}
				let {data: {data: res}} = await getCommentNew(this.commentOptions)
				this.commendList.push(...res.comments)
				this.totalCount = res.totalCount
				this.hasMore = res.hasMore
			},
			async getCommentFloorDetail(commentId) {
				const len = this.recommentList.length
				this.commentFloorOptions.parentCommentId = commentId
				if (len > 0) this.commentFloorOptions.time = this.recommentList[len - 1].time
				// 数据处理
				if (this.videoType == 1) {
					this.commentFloorOptions.type = 5
				} else {
					this.commentFloorOptions.type = 1
				}
				const { data: { data: res } } = await getCommentFloor(this.commentFloorOptions)
				this.recommentList.push(...res.comments)
				if (commentId != this.ownerComment.commentId) {
					this.ownerComment = res.ownerComment
					this.reTotalCount = res.totalCount
				}
				this.reHasMore = res.hasMore
			},
			// 评论下拉加载更多
			scrolltolower() {
				if (!this.hasMore) return
				this.commentOptions.pageNo++
				this.getCommentNewDetail()
			},
			// 评论回复列表下拉加载更多
			scrollItemTolower(id) {
				if (!this.reHasMore) return
				this.getCommentFloorDetail(id)
			},
			// 打开回复列表,并获取回复列表的数据
			handleShowRecommend(commentId) {
				this.isShow = true
				this.getCommentFloorDetail(commentId)
			},
			// 关闭回复列表
			handleCloseRecommend() {
				this.isShow = false
				this.reHasMore = true
				this.recommentList = []
				this.commentFloorOptions.time = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commend_box {
		width: 100%;
		/* #ifndef H5 */
		height: calc(55vh);
		/* #endif */
		/* #ifdef H5 */
		height: calc(55vh - 100rpx);
		/* #endif */
		.commend-scroll-view {
			height: 100%;
		}
		.commend_title, .recomment_title {
			font-weight: bold;
			margin: 20rpx 0;
			padding-left: 20rpx;
		}
		// 评论/回复公共样式
		scroll-view {
			.commend_item, .recomment_item {
				display: flex;
				padding: 20rpx;
				.commend_item_avatar, .recomment_item_avatar {
					width: 80rpx;
					height: 80rpx;
					margin-right: 15rpx;
					image {
						width: 100%;
						min-width: 80rpx;
						height: 100%;
						border-radius: 50%;
					}
				}
				.commend_item_info, .recomment_item_info {
					font-size: 30rpx;
					flex: 1;
					border-bottom: 1px solid #C8C7CC;
					padding: 15rpx 0;
					.release_time {
						font-size: 28rpx;
						color: #C8C7CC;
						margin-bottom: 15rpx;
					}
					.txt {
						white-space: wrap;
					}
					.recontext {
						color: #78dcfe;
						transform-origin: left center;
						transform: scale(0.8);
					}
				}
			}
		}
		// 遮罩层样式
		.comment_mask {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			height: 32vh;
			z-index: 99;
			background-color: rgba(0, 0, 0, 0.02);
		}
		// 回复样式
		.recomment {
			position: absolute;
			z-index: 99;
			bottom: 0;
			left: 0;
			right: 0;
			height: 0;
			overflow: hidden;
			border-radius: 50rpx 50rpx 0 0;
			background-color: #ffffff;
			transition: height 0.3s linear;
			.recomment-scroll-view {
				height: calc(100% - 88rpx);
			}
			&.show_recomment {
				height: calc(70vh - 88rpx);
			}
		}
	}
</style>
